<template>
  <div class="page" :class="`message-${mode}-page`">
    <nav-bar theme="black" :leftArrow="false"></nav-bar>
    <div class="page-main" style="margin-top: 44px" :class="`message-${mode}-main`">
      <div class="message-title">
        <van-icon :name="centerIcon" :style="{ color: centerIconColor }" :size="centerIconSize" v-if="centerIcon" />
        <p>{{ title }}</p>
      </div>
      <div class="message-label">
        <template v-if="$slots.label && $slots.label.length">
          <slot name="label"></slot>
        </template>
        <div v-html="label" v-else></div>
      </div>
      <div style="margin: 60px 0">
        <van-button block type="info" size="large" @click="back">
          {{ backText }}
        </van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    mode: {
      type: String,
      default: 'center'
    },
    title: {
      type: String,
      default: '提交成功'
    },
    label: {
      type: String
    },
    backText: {
      type: String,
      default: '返回首页'
    },
    backTo: {
      type: String,
      default: '/home'
    },
    centerIcon: {
      type: String
    },
    centerIconColor: {
      type: String,
      default: '#3CBDD0'
    },
    centerIconSize: {
      type: String,
      default: '66'
    }
  },
  data() {
    return {}
  },
  methods: {
    back() {
      if (isNaN(this.backTo)) {
        this.$router.push(this.backTo)
      } else {
        this.$router.go(this.backTo)
      }
    }
  }
}
</script>
<style scope lang="less">
.message-left-main,
.message-center-main {
  padding: 32px 64px;
}
.message-left-main {
  .message-title {
    font-size: 48px;
    font-weight: 500;
    line-height: 112px;
  }
  .message-label {
    font-size: 32px;
    color: rgba(0, 0, 0, 0.54);
  }
}
.message-center-main {
  text-align: center;
  .van-icon {
    margin: 16px 0;
  }
  .message-title {
    margin-bottom: 64px;
    font-size: 40px;
    font-weight: 400;
  }
  .message-label {
    font-size: 28px;
    color: rgba(0, 0, 0, 0.54);
  }
}
</style>
